<template>
  <div class="blank-template-container" :style="layoutStyle">
    <TitleB
      :title="blankTempInfo.moduleTitle"
      @titleBValUpdate="onModuleTitleUpdate"
      @btnClick="onBtnClick"
      iconName="el-icon-folder"
      :backgroundColor="myThemeColor"
    ></TitleB>
    <AutoTextArea
      v-for="content in blankTempInfo.contentList"
      :key="content.id"
      :data="content.content"
      :backgroundColor="backgroundColor"
      @textChange="onContentChange(content.id, $event)"
    ></AutoTextArea>
  </div>
</template>

<script>
import TitleB from '@/components/base/TitleB.vue'
import AutoTextArea from '@/components/base/AutoTextArea.vue'
import { nanoid } from 'nanoid'
import {mapGetters} from 'vuex'
export default {
  name: 'BlankTemplate',
  data() {
    return {
      blankTempInfo: {
        moduleTitle: '',
        contentList: [],
      },
      id: '',
    }
  },
  props: {
    layoutType: {
      type: String,
      default: '',
    },
    blankTemProps: {
      type: Object,
      default: function () {
        return {
          moduleTitle: '新建模块',
          contentList: [
            {
              id: '1',
              content: '自定义内容',
            },
          ],
        }
      },
    },
    moduleId: {
      type: String,
      default: nanoid(),
    },
  },
  created() {
    this.blankTempInfo = { ...this.blankTemProps }
    this.id = this.moduleId
  },
  computed: {
    layoutStyle() {
      return this.layoutType === 'left'
        ? {
            padding: 0,
          }
        : ''
    },
    backgroundColor() {
      return this.layoutType === 'left' ? '#062743' : 'white'
    },
    ...mapGetters(['myThemeColor']),
  },
  methods: {
    // 修改模板描述内容
    onContentChange(id, newVal) {
      this.blankTempInfo.contentList.some((item) => {
        if (item.id === id) {
          item.content = newVal
          return
        }
      })
      this.updateStore()
    },
    onBtnClick(tag) {
      switch (tag) {
        case 'add':
          this.addContent()
          break
        case 'delete':
          this.deleteContent()
          break
        case 'remove':
          this.removeModule()
          break
      }
    },
    // 添加一条新的描述
    addContent() {
      let id = new Date().getTime()
      const content = {
        id,
        content: '自定义内容',
      }
      this.blankTempInfo.contentList.push(content)
      this.updateStore()
    },
    // 删除一条描述
    deleteContent() {
      if (this.blankTempInfo.contentList.length <= 1) {
        this.$message.warning('至少需要一条数据')
      } else {
        this.blankTempInfo.contentList.pop()
        this.updateStore()
      }
    },
    // 移除该模块
    removeModule() {
      this.$store.commit('removeModule', this.id)
    },
    // 修改模块标题
    onModuleTitleUpdate(newVal) {
      this.blankTempInfo.moduleTitle = newVal
      this.updateStore()
    },
    // 更新仓库数据
    updateStore() {
      const newData = { props: this.blankTempInfo, id: this.id }
      this.$store.commit('setModule', newData)
    },
  },
  components: {
    TitleB,
    AutoTextArea,
  },
}
</script>

<style scoped lang="less">
.blank-template-container {
  width: 100%;
  padding: 0 15px;
  margin-bottom: 5px;
}
</style>
